<template>
    <main-wrap :loading="true" :load="getList" :end="finished" :overText="lists.length==0 ? ' ':''">
        <template v-slot:header>
            <div class="scbox">
                <my-search v-model.trim="searchParams.keyword" @serach="keySearch" icon="" placeholder="请输入姓名搜查"/>
            </div>
        </template>
        <div v-if="departments">
            <div class="titleBox">
                <div class="name">成员</div>
                <span>客户总数</span>
                <span>今日新增</span>
            </div>
            <div class="itemCon" v-for="dt in lists" :key="dt._id.userid">
                <div class="name">
                    <div>
                        <h5>{{dt._id.name}}</h5>
                        <p>{{convertDp(dt._id)}}</p>
                    </div>
                </div>
                <span>{{dt.lists.length}}</span>
                <span>{{getAddNum(dt.lists)}}</span>
            </div>
        </div>
        <!-- <template v-slot:footer>
            <footer-nav/>
        </template> -->
    </main-wrap>
</template>
<script setup>
import { ref,onMounted,nextTick } from "vue";
import {useRouter} from 'vue-router'
import moment from 'moment'
import Image from "@/components/image.vue"
import {customCount,getDepartmentList} from '@/api/qy-wechat-api'
import {toast,loading,clearToast} from '@/utils/vant'
import { useUserStore } from '@/stores/modules/user'
import mainWrap from '@/components/mainWrap.vue'
import mySearch from '@/components/mySearch.vue'
import footerNav from '@/components/footerNav.vue'

const router = useRouter()
const userStore = useUserStore()

const lists = ref('')
let pageSize = 20
let pageIndex = 1
const searchParams = ref({isUsable:true}) // isUsable:true只看可用的客户（即没有删除的用户）
const finished = ref(false)
const departments = ref('') // 部门列表
const today = ref('')

onMounted(async ()=>{
    today.value = moment().format('YYYY-MM-DD')
    //console.log("userInfo:",userStore.userInfo)
    const res = await getDepartmentList()  // 获取部门
    departments.value = res.data.department || []
    getList()
})

const forFn =(dpIds)=>{
    let strArr = []
    dpIds.forEach(item => {
        const fData = departments.value.find(it => it.id == item)
        if(fData){
            strArr.push(fData.name)
        }
    });
    return strArr.join(',')
}

const convertDp = (member)=>{
    let strArr = []
    member.department.forEach(item => {
        const fData = departments.value.find(it => it.id == item)
        if(fData){
            strArr.push(fData.name)
        }
    });
    return strArr.join(',')
//     if(departments.value.length>0){ 
//        return forFn(member.department)
//     }else{
//         getDepartmentList().then(res =>{  // 获取部门
//             departments.value = res.data.department || []
//             return forFn(member.department)
//         })  
//     }
 }

 const getAddNum = (lists)=>{
    let num = 0
    const today_timeStamp_start = moment(`${today.value} 00:00:01`).unix()
    const today_timeStamp_end = moment(`${today.value} 23:59:59`).unix()
    //console.log(today_timeStamp_start,today_timeStamp_end)
    lists.forEach(item =>{
       if(item.follow_createTime>=today_timeStamp_start && item.follow_createTime<=today_timeStamp_end){
            num++
       }
    })
    return num
 }

const getList = async ()=>{
    return new Promise((resolve, reject) => {
        setTimeout(async () => {
            const res = await customCount({pageSize,pageIndex,...searchParams.value})
            lists.value = [...lists.value, ...res.data.lists];
            pageIndex++;
            if (lists.value.length >= res.data.memberTotal) {
              finished.value = true;
            }
            resolve(true);
        }, 500);
    });
}

const keySearch = ()=>{
    pageIndex = 0
    lists.value = ''
    getList()
}

</script>

<style lang="scss" scoped>
.titleBox,.itemCon{
    box-sizing: border-box;
    display: flex;
    min-height: 70px;
    background-color: #f5f3f3;
    padding: 0 20px;
    margin-top: 4px;
    .name{
        display: flex;
        align-items: center;
        flex: 1;
        flex-shrink: 0; 
        h5{
            font-size: 28px;
        }
        p{
            font-size: 26px;
            color: #999;
        }
    }
    span{
        display: flex;
        align-items: center;
        justify-content: center;
        width: 150px;
        color: #999;
    }
}
.itemCon{
    background-color:#fff;
    padding-top: 15px;
    padding-bottom: 15px;
    
    span{
        color: #333;
    }
}
</style>